<template>
	<div>
		<el-form
			:model="form"
			:rules="rules"
			ref="formRef"
			label-width="180px"
			label-position="left"
			:inline="true"
		>
			<el-form-item label="重力加速度 (g)" prop="g">
				<el-input class="ipt" type="number" v-model="form.g" />
			</el-form-item>
			<el-form-item label="路面附着系数 (o)" prop="o">
				<el-input class="ipt" v-model="form.o" type="number" />
			</el-form-item>
			<el-form-item label="道路坡度 (rad)" prop="i">
				<el-input class="ipt" v-model="form.iDegrees" type="number" />
			</el-form-item>
			<el-form-item label="制动痕迹距离 (s)" prop="s">
				<el-input class="ipt" v-model="form.s" type="number" />
			</el-form-item>
		</el-form>
		<div style="margin-top: 50px">
			<el-button type="primary" @click="calculateSpeed">计算车速</el-button>
		</div>
		<el-alert
			v-if="result !== null"
			title="计算结果"
			:closable="false"
			type="success"
			:description="'车速 (v) = ' + result.toFixed(2) + ' km/h'"
		/>
	</div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const formRef = ref(null);
const form = ref({
	g: null,
	o: null,
	iDegrees: null,
	s: null
});

const result = ref(null);

const rules = {
	g: [{ required: true, message: "请输入重力加速度", trigger: "blur" }],
	o: [{ required: true, message: "请输入路面附着系数", trigger: "blur" }],
	iDegrees: [{ required: true, message: "请输入道路坡度", trigger: "blur" }],
	s: [{ required: true, message: "请输入制动痕迹距离", trigger: "blur" }]
};

const calculateSpeed = () => {
	formRef.value.validate((valid) => {
		if (valid) {
			const { g, o, iDegrees, s } = form.value;
			console.log(g, o, iDegrees, s);
			//根据制动痕迹计算车速
			const toRadians = (degrees) => degrees * (Math.PI / 180);
			const i = toRadians(iDegrees);
			const v = Math.sqrt(2 * (o * 1 + i * 1) * g * 1 * s * 1) * 3.6; // 3.6 converts m/s to km/h
			result.value = v;
		}
	});
};
</script>
<style scoped>
.ipt {
	width: 120px;
}
</style>
